<template>
  <div class="search">
    <div class="container">
      <div class="title">车辆运输详情</div>
      <div class="remark">
        <div class="remark-title">配送完成</div>
        <div class="remark-content">
          <span>司机备注：</span>有3件物品损坏
        </div>
        <div class="remark-content back">
          <span>上传图片：</span>
          <div class="img-list">
            <div class="img" />
            <div class="img" />
            <div class="img" />
          </div>
        </div>
        <div class="remark-content">
          <span>配送完成时间：</span>2019-11-11 11:11:11
        </div>
      </div>
      <div class="inventory">
        <div class="inventory-title">
          <span>运输商品清单</span>
          <div class="btn" @click="dialogVisible = true">查看</div>
        </div>
        <div class="inventory-list">
          <ul>
            <li class="list">
              <div class="list-title">车辆一</div>
              <div class="list-cont">
                <div class="left">
                  <div>
                    <span>发货方式：</span>车辆配送
                  </div>
                  <div>
                    <span>司机姓名：</span>王大锤
                  </div>
                  <div>
                    <span>商家备注：</span>发票随车
                  </div>
                </div>
                <div class="right">
                  <div>
                    <span>发货车牌号：</span>粤A 88888
                  </div>
                  <div>
                    <span>司机电话：</span>13265034453
                  </div>
                  <div>
                    <span>司机接货时间：</span>2019-11-11 11:11:11
                  </div>
                </div>
              </div>
              <div class="validation">
                <span class="validation-title">收货验证码：</span>123456
                <span class="remind">（请勿泄露本验证码，司机配送时将会向您索取本验证码，验证完成则表明已收到货）</span>
              </div>
              <div class="img-list">
                <div class="img" />
                <div class="img" />
                <div class="img" />
              </div>
            </li>
            <li class="list">
              <div class="list-title">车辆一</div>
              <div class="list-cont">
                <div class="left">
                  <div>
                    <span>发货方式：</span>车辆配送
                  </div>
                  <div>
                    <span>司机姓名：</span>王大锤
                  </div>
                  <div>
                    <span>商家备注：</span>发票随车
                  </div>
                </div>
                <div class="right">
                  <div>
                    <span>发货车牌号：</span>粤A 88888
                  </div>
                  <div>
                    <span>司机电话：</span>13265034453
                  </div>
                  <div>
                    <span>司机接货时间：</span>2019-11-11 11:11:11
                  </div>
                </div>
              </div>
              <div class="validation">
                <span class="validation-title">收货验证码：</span>123456
                <span class="remind">（请勿泄露本验证码，司机配送时将会向您索取本验证码，验证完成则表明已收到货）</span>
              </div>
              <div class="img-list">
                <div class="img" />
                <div class="img" />
                <div class="img" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <el-dialog title="运输商品清单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="product-list">
          <ul>
            <li class="list">
              <div class="product-content">
                <div class="content-left" />
                <div class="content-right">
                  <div class="content-title">钢管</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size moey-width"><span class="money">￥58.00/吨</span><span>x1</span></div>
                </div>
              </div>
            </li>
            <li class="list">
              <div class="product-content">
                <div class="content-left" />
                <div class="content-right">
                  <div class="content-title">钢管</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size moey-width"><span class="money">￥58.00/吨</span><span>x1</span></div>
                </div>
              </div>
            </li>
            <li class="list">
              <div class="product-content">
                <div class="content-left" />
                <div class="content-right">
                  <div class="content-title">钢管</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size"><span>标号：</span>外16内6.03</div>
                  <div class="size moey-width"><span class="money">￥58.00/吨</span><span>x1</span></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      input: '',
      num1: 1,
      dialogVisible: false
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleClose(done) {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang='scss' scoped >
.search {
  background: #f5f5f5;
  .container {
    .title {
      background: #ffffff;
      color: #3d3d3d;
      height: 57px;
      font-size: 16px;
      font-weight: bold;
      line-height: 57px;
      padding-left: 20px;
      margin: 30px 0 20px 0;
    }
    .remark {
      padding: 18px 0 18px 20px;
      background: #ffffff;
      margin-bottom: 20px;
      .remark-title {
        color: #3d3d3d;
        font-size: 16px;
        margin-bottom: 12px;
      }
      .remark-content {
        display: flex;
        span {
          color: #6b6b6b;
        }
        .img-list {
          display: flex;
          .img {
            width: 53px;
            height: 55px;
            background: red;
            margin-right: 10px;
          }
        }
      }
      .back {
        margin: 15px 0;
      }
    }
    .inventory {
      background: #ffffff;
      margin-bottom: 140px;
      .inventory-title {
        padding-left: 20px;
        border-bottom: 1px solid #e5e5e5;
        height: 58px;
        display: flex;
        align-items: center;
        span {
          color: #3d3d3d;
          font-size: 16px;
          font-weight: bold;
        }
        .btn {
          width: 80px;
          height: 30px;
          background: #ff3b30;
          color: #ffffff;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
          margin-left: 48px;
          border-radius: 3px;
        }
      }
      .inventory-list {
        padding: 0px 20px 0px 20px;
        .list {
          border-bottom: 1px solid #e5e5e5;
        }
        .list:last-child {
          border-bottom: none;
        }
        .list-title {
          color: #3d3d3d;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 12px;
          margin-top: 18px;
        }
        .list-cont {
          display: flex;
          width: 600px;
          justify-content: space-between;
          line-height: 30px;
          span {
            color: #6b6b6b;
          }
          .left {
            span {
              margin-right: 26px;
            }
          }
        }
        .validation {
          margin-top: 4px;
          .validation-title {
            color: #6b6b6b;
          }
          .remind {
            color: #fc8a41;
          }
        }
        .img-list {
          display: flex;
          margin-top: 18px;
          .img {
            margin-right: 16px;
            margin-bottom: 20px;
            width: 82px;
            height: 83px;
            background: #fc8a41;
          }
        }
      }
    }
    .product-list{
        .list{
            margin-top: 20px;
            padding-bottom: 20px;
            border-bottom: 1px dotted #707070;
            .product-content{
                display: flex;
                .content-left{
                    width: 82px;
                    height: 82px;
                    background: #fc8a41;
                    margin-right: 30px;
                }
                .content-right{
                    line-height: 18px;
                    .content-title{
                        color: #3D3D3D;
                    }
                    .size{
                        font-size: 12px;
                        .money{
                            color: #FF3B30;
                        }
                    }
                    .moey-width{
                        width: 160px;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }
        .list:last-child{
            border-bottom: none;
            padding-bottom: 0px;
        }
        .list:first-child{
            margin-top: 0;
        }
    }
  }
}
</style>
